<template>
  <div class="cityCom">
    <span class="city">
      {{ cityName }}
    </span>
    <van-dropdown-menu
      class="menu"
      active-color="#1989fa"
      :get-container="getContainer"
      style="top:95px"
    >
      <van-dropdown-item ref="item" style="display:block">
        <van-index-bar :index-list="indexList">
          <div v-for="(item, index) in cityList" :key="index">
            <van-index-anchor :index="index">{{ index }}</van-index-anchor>
            <van-cell
              v-for="(it, idx) in item"
              :key="idx"
              @click="clickEvent(it)"
              :title="it"
            />
          </div>
        </van-index-bar>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>
<script>
// 使用 : v-model=当前城市名称 默认北京
export default {
  name: 'CityChange',
  props: {
    // 面试题筛选条件
    questionFilters: { type: Object, default: () => ({}) },
    cityName: { type: String, default: '北京' }
  },
  model: { prop: 'cityName' },
  data () {
    return {
      show: false
      // indexList: [],
      // cityList: [],
    }
  },

  computed: {
    indexList () {
      return Object.keys(this.questionFilters.citys)
    },
    cityList () {
      return this.questionFilters.citys
    }
  },
  methods: {
    getContainer () {
      return document.querySelector('.menu')
    },
    // 显示弹框
    showTime () {
      this.$refs.item.toggle()
    },

    // 选择城市
    clickEvent (name) {
      this.$refs.item.toggle()
      this.$emit('input', name)
      this.show = false
    },
    selectEvent (index) {
      console.log('index', index)
    }
  }
}
</script>
<style scoped lang="less">
.cityCom {
  display: inline-block;
  text-align: left;
  .city {
    font-size: 24px;
    color: #545671;
    padding: 0 10px;
    transition: all 1s;
    .rote {
      transform: rotateZ(90deg);
    }
  }
  .menu {
    top: 94px !important;
  }
  ::v-deep .van-index-anchor {
    background-color: #f7f4f5 !important;
  }
  ::v-deep .van-dropdown-menu__bar {
    height: 0;
    font-size: 0;
  }
  ::v-deep .van-popup--top {
    top: 120px;
  }
  ::v-deep .van-dropdown-menu__title::after {
    top: -15px;
    right: -30px;
  }
}
</style>
